<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>NCM音频格式转换器</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        
        .drop-zone {
            border: 3px dashed #cbd5e0;
            border-radius: 12px;
            padding: 40px;
            text-align: center;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
        }
        
        .drop-zone:hover {
            border-color: #667eea;
            background: rgba(255, 255, 255, 0.2);
        }
        
        .drop-zone.dragover {
            border-color: #667eea;
            background: rgba(102, 126, 234, 0.2);
            transform: scale(1.02);
        }
        
        .file-item {
            background: rgba(255, 255, 255, 0.9);
            border-radius: 8px;
            padding: 15px;
            margin: 10px 0;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
        }
        
        .file-item:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
        }
        
        .progress-bar {
            height: 6px;
            background: #e2e8f0;
            border-radius: 3px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(90deg, #667eea, #764ba2);
            transition: width 0.3s ease;
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.1);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 12px;
        }
    </style>
</head>
<body>
    <div class="container mx-auto px-4 py-8">
        <div class="text-center mb-8">
            <h1 class="text-4xl font-bold text-white mb-2">
                <i class="fas fa-music mr-3"></i>NCM音频格式转换器
            </h1>
            <p class="text-white/80 text-lg">将网易云音乐NCM格式转换为MP3或FLAC</p>
        </div>

        <div class="max-w-4xl mx-auto">
            <!-- 拖放区域 -->
            <div id="dropZone" class="drop-zone mb-6">
                <i class="fas fa-cloud-upload-alt text-6xl text-white/60 mb-4"></i>
                <h3 class="text-xl font-semibold text-white mb-2">拖拽NCM文件到此处</h3>
                <p class="text-white/70">或点击选择文件</p>
                <input type="file" id="fileInput" multiple accept=".ncm" class="hidden">
                <button onclick="document.getElementById('fileInput').click()" 
                        class="btn btn-primary mt-4">
                    <i class="fas fa-folder-open mr-2"></i>选择文件
                </button>
            </div>

            <!-- 设置区域 -->
            <div class="glass-card p-6 mb-6">
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label class="block text-white font-semibold mb-2">输出格式</label>
                        <select id="outputFormat" class="select select-bordered w-full">
                            <option value="mp3">MP3 (320kbps)</option>
                            <option value="flac">FLAC (无损)</option>
                        </select>
                    </div>
                    <div>
                        <label class="block text-white font-semibold mb-2">输出文件夹</label>
                        <div class="flex gap-2">
                            <input type="text" id="outputFolder" readonly 
                                   class="input input-bordered flex-1" 
                                   placeholder="选择输出文件夹">
                            <button onclick="selectOutputFolder()" 
                                    class="btn btn-secondary">
                                <i class="fas fa-folder"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 文件列表 -->
            <div id="fileList" class="space-y-4"></div>

            <!-- 转换按钮 -->
            <div class="text-center mt-6">
                <button id="convertBtn" onclick="startConversion()" 
                        class="btn btn-primary btn-lg hidden">
                    <i class="fas fa-play mr-2"></i>开始转换
                </button>
            </div>
        </div>
    </div>

    <!-- 结果模态框 -->
    <div id="resultModal" class="modal">
        <div class="modal-box">
            <h3 class="font-bold text-lg mb-4">转换完成</h3>
            <div id="resultContent"></div>
            <div class="modal-action">
                <button class="btn" onclick="closeModal()">关闭</button>
                <button class="btn btn-primary" onclick="openOutputFolder()">打开文件夹</button>
            </div>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/axios/1.6.7/axios.min.js"></script>
    <script src="renderer.js"></script>
</body>
</html>
